<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册&登录</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>注册&登录</el-header>
        <br>
        <el-row>
            <el-col :offset="9" :span="6">
                <el-input v-model="userName" placeholder="请输入账号">
                    <template slot="prepend">账号：</template>
                </el-input>
            </el-col>
            <el-col :offset="9" :span="6">
                <br>
            </el-col>
            <el-col :offset="9" :span="6">
                <el-input type="password" v-model="password" placeholder="请输入密码">
                    <template slot="prepend">密码：</template>
                </el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-col :offset="9" :span="2">
                <br>
                <el-button type="info" @click="register">注册</el-button>
            </el-col>
            {{msg}}
            <el-col :offset="3" :span="2">
                <br>
                <el-button type="primary" @click="login">登录</el-button>
            </el-col>
        </el-row>
    </el-container>
</div>
</body>

<style>
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
</style>

<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                userName:undefined,
                password:undefined,
                msg:undefined
            }
        },
        methods:{
            login(){
                axios({
                    method:"get",
                    url:"http://47.113.184.61:8080/commService/login",
                    params:{
                        userName: this.userName,
                        password: this.password
                    }
                }).then((resp) => {
                    if(resp.status === 200) {
                        window.location.href="http://47.113.184.61:8080/commService/service.html";
                    }
                }).catch((err) => {
                    console.log(err);
                })
            },
            register(){
                axios({
                    method:"get",
                    url:"http://47.113.184.61:8080/commService/register",
                    params:{
                        userName: this.userName,
                        password: this.password
                    }
                }).then((resp) => {
                    if(resp.status === 200) {
                        this.msg = "注册成功，请登录！"
                        return;
                    }
                }).catch((err) => {
                    console.log(err);
                })
            }
        }
    })
</script>
</html>